<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Wallet Baristas</title>
  <link rel="stylesheet" type="text/css" href="style.css" media="screen">
  <script type="text/javascript"
        language="javascript"
        src="{{js_url}}">
  </script>
  <script type="text/javascript">
    window.onload = function(){
      goog.wallet.notifyTransactionStatus("{{transaction_status_notification_jwt}}");
    }
  </script>
</head>
<body>
  <div id="header">
    <h1>Wallet Baristas</h1>
  </div>
  
  <h2>Receipt</h2>
  <div id="formatBar">
  	<p>Your order has been placed!  Thank you for your order.</p>
    <div class="offset"><b>Purchase Details</b></div>
    <br />
    <div class="offset">{{order_description}}</div>
    <div class="offset"><b>Total: </b>{{total_price}}</div>
  </div>
  <h2>Payment Details</h2>
  <h4>Card Details</h4>
  <div id="formatBar">
    <div class="offset"><b>name: </b>{{payment_instrument.billing_address.name}}</div>
    <div class="offset"><b>card name: </b>{{payment_instrument.descriptive_name}}</div>
    <div class="offset"><b>type: </b>{{payment_instrument.type}}</div>
    <div class="offset"><b>expiration: </b>{{payment_instrument.expiration_month}}/{{payment_instrument.expiration_year}}</div>
  </div>
</body>
</html>
